<template>
  <div class="cargo">
    <div class="header" ref="header">
      <div class="header-left" ref="headerLeft">
        <div class="icon-slide" @click="toggleSlide">
          <img src="/static/icon/shenzhan.png" v-show="slideState"/>
          <img src="/static/icon/suojing.png" v-show="!slideState"/>
        </div>
      </div>
      <div class="user-panel" :class="{'active': rightSlideState}">
        <div class="item" @click="toggleSlideRight(rightItemType.record)" :class="rightItemCls(rightItemType.record)">
          <div class="icon-item">
            <div class="icon">
              <i class="iconfont icon-jilu"></i>
            </div>
            <p class="text">操作记录</p>
          </div>
        </div>
        <div class="item" @click="toggleSlideRight(rightItemType.user)" :class="rightItemCls(rightItemType.user)">
          <div class="user">
            <img ref="avatar" src="/static/icon/morentx2.png"/>
            <span class="name">李先生</span>
          </div>
        </div>
        <!-- 右侧子菜单-->
        <transition name="slide-down">
          <div class="sub-menu" v-show="rightSlideState">
            <!--用户-->
            <div class="sub-content" v-show="activeRightSubmenu === rightItemType.user">

            </div>
            <!--操作记录-->
            <div class="sub-content" v-show="activeRightSubmenu === rightItemType.record">

            </div>
            <div class="mask" @click="toggleSlideRight(activeRightSubmenu)"></div>
          </div>
        </transition>
      </div>
    </div>
    <div class="side" ref="side">
      <transition-group name="fade" class="side-header" tag="div">
        <img :key="1" class="logo1" src="/static/icon/logo.png" v-show="!slideState"/>
        <img :key="2" class="logo2" src="/static/icon/logo-2.png" v-show="slideState"/>
      </transition-group>
      <div class="side-menu">
        <el-menu
          background-color="#323641"
          text-color="#fff"
          active-text-color="#5491de">
          <li class="menu-item"
              :class="{'active-menu' : activeIndex === index}"
              v-for="(item,index) in menuRoutes"
              :key="item.title"
              @click="selectMenu(item,index)"
              @mouseover="mouserOverMenu(item,index)"
              @mouseleave="mouseLeaveMenu">
            <i :class="item.icon" v-if="item.icon"></i>
            <img :src="item.img" :class="{ 'big' : slideState }"/>
            <span class="title" :class="{'slide-hide' : slideState}">{{item.title}}</span>
          </li>
        </el-menu>
        <transition name="fade">
          <div
            @mouseover="mouserOverSubMenu"
            @mouseleave="mouseLeaveSubMenu"
            class="sub-menu"
            ref="subMenu"
            v-show="activeSubmenu.length && submenuShow">
            <router-link @click.native="changeSubMenu" :to="menu.path" tag="li" class="sub-menu-item"
                         v-for="menu in activeSubmenu" :key="menu.path">
              {{menu.title}}
            </router-link>
          </div>
        </transition>
      </div>
      <div class="side-footer">
        <div class="user-wrapper">
          <!--<img src="../../assets/image/cargo/timg.jpg"/>-->
          <!--<span @click="logout">退出</span>-->
          <img src="/static/icon/xshezhi.png"/>
          <img src="/static/icon/xtuichu.png" @click="logout"/>
        </div>
      </div>
    </div>
    <div class="container" ref="container">
      <router-view/>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'
  import {getScrollTop} from 'common/js/util'

  const SLIDE_PERCENT = 2.3 //侧边栏缩放比例

  export default {
    created() {
      this.getMenuRoutes()
      this.findActiveIndex()
      this.rightItemType = {
        user: 'user',
        record: 'record'
      }
    },
    mounted() {
      this.getSlide()
      // 监听下滑 添加阴影
      this.listenScroll()
    },
    data() {
      return {
        menuRoutes: [],
        // 当前鼠标移入一级菜单的二级菜单列表
        activeSubmenu: [],
        activeIndex: '',
        submenuShow: false,
        slideState: false,
        rightSlideState: false,
        activeRightSubmenu: ''
      }
    },
    computed: {
      ...mapGetters(['routes'])
    },
    methods: {
      getMenuRoutes() {
        const children = this.routes[0].children
        let ret = []
        // 用来判断有没有添加过一级菜单
        let recodeMap = {}
        // 记录每个路由name对应的主菜单index 方便findActiveIndex方法查找
        let indexMap = {}
        children.forEach((val, index) => {
          const meta = val.meta
          // 一级菜单
          if (!meta.parentTitle) {
            ret.push({
              ...meta.title,
              path: val.path
            })
            indexMap[val.name] = index
          } else {
            // 第一次添加一级菜单
            if (!recodeMap[meta.parentTitle.title]) {
              ret.push({
                ...meta.parentTitle
              })
              const lastOne = ret.length - 1
              ret[lastOne].children = []
              ret[lastOne].children.push({
                title: meta.title,
                path: val.path
              })
              indexMap[val.name] = lastOne
              // 记录下标 方便下次快速添加
              recodeMap[meta.parentTitle.title] = lastOne
            } else {
              // 该主菜单已经添加过二级菜单
              ret[recodeMap[meta.parentTitle.title]].children.push({
                title: meta.title,
                path: val.path
              })
              indexMap[val.name] = recodeMap[meta.parentTitle.title]
            }
          }
        })
        this.menuRoutes = ret
        // 挂载到vue实例下让findActiveIndex方法调用
        this.indexMap = indexMap
      },
      findActiveIndex() {
        const name = this.$route.name
        this.activeIndex = this.indexMap[name]
      },
      selectMenu(item, index) {
        // 一级菜单没有path
        if (!item.path) {
          return
        }
        this.$router.push(item.path)
        this.activeIndex = index

      },
      logout() {
        window.localStorage.setItem('keys', null)
        this.$router.push('login')
      },
      mouserOverMenu(item, index) {
        this.submenuShow = true
        this.activeSubmenu = item.children || []
        this.overMenuIndex = index
      },
      mouseLeaveMenu() {
        this.submenuShow = false
      },
      mouserOverSubMenu() {
        this.submenuShow = true
      },
      mouseLeaveSubMenu() {
        this.submenuShow = false
      },
      changeSubMenu() {
        this.activeIndex = this.overMenuIndex
        this.activeSubmenu = []
      },
      toggleSlide() {
        this.slideState = !this.slideState
        window.localStorage.setItem('slide', this.slideState)
        const side = this.$refs.side
        const headerLeft = this.$refs.headerLeft
        const container = this.$refs.container
        const subMenu = this.$refs.subMenu
        if (!this.defaultStyle) {
          this.defaultStyle = {}
          this.defaultStyle.sideWidth = getComputedStyle(side).width.replace('px', '')
          this.defaultStyle.containMargin = getComputedStyle(container).marginLeft.replace('px', '')
        }

        // true 收起
        if (this.slideState) {
          const calcWidth = this.defaultStyle.sideWidth / SLIDE_PERCENT
          side.style.width = `${calcWidth}px`
          const diffX = this.defaultStyle.sideWidth - calcWidth
          headerLeft.style.transform = `translateX(-${diffX}px)`
          subMenu.style.transform = `translateX(-${diffX}px)`
          container.style.marginLeft = `${this.defaultStyle.containMargin - diffX}px`
        } else {
          // 展开
          side.style.width = `${this.defaultStyle.sideWidth}px`
          headerLeft.style.transform = ''
          subMenu.style.transform = ''
          container.style.marginLeft = `${this.defaultStyle.containMargin}px`
        }
      },
      getSlide() {
        const slideState = window.localStorage.getItem('slide')
        if (slideState === 'true') {
          this.toggleSlide()
        }
      },
      toggleSlideRight(itemName) {
        // 选中了同一项
        if (this.activeRightSubmenu === itemName) {
          this.rightSlideState = !this.rightSlideState
          return
        }
        this.rightSlideState = true
        this.activeRightSubmenu = itemName

      },
      rightItemCls(itemName) {
        return this.rightSlideState && this.activeRightSubmenu === this.rightItemType[itemName] ? 'active' : ''
      },
      listenScroll() {
        const header = this.$refs.header
        window.addEventListener('scroll', () => {
          const scrollTop = getScrollTop()
          if (scrollTop > 10) {
            if (this.shadowState) return
            header.style.boxShadow = '10px 10px 10px #d7dbdc'
            this.shadowState = true
          } else {
            header.style.boxShadow = ''
            this.shadowState = false
          }
        })
      }
    },
    watch: {
      $route(newRoute) {
        // 找不到父菜单标题说明是一级菜单
        const title =(newRoute.meta.parentTitle && newRoute.meta.parentTitle.title) ||  (newRoute.meta.title.title)
        const index = this.menuRoutes.findIndex(route => {
          return route.title === title
        })
        if (this.activeIndex !== index) this.activeIndex = index
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~common/stylus/variable.styl"

  .slide-hide
    display none

  .el-menu
    border none

  .cargo
    overflow: hidden
    .header
      display flex
      position fixed
      box-sizing border-box
      height $header-height
      width 100%
      background #edf1f2
      padding-left $side-width
      transition-duration .2s
      z-index $side-zIndex
      .header-left
        transition-duration .2s
        .icon-slide
          height 100%
          position relative
          line-height $header-height
          white-space nowrap
          padding 0 30px
          cursor pointer
          img
            position absolute
            top 50%
            left 50%
            transform translate(-50%, -50%)
          i
            font-size 20px
            color #999
          &:hover
            background-color: #f9f9f9;
            i
              color: #5491de;
      .user-panel
        position absolute
        display flex
        right 0
        top 0
        height 100%
        transform all .3s
        &.active
          box-shadow 0 0 15px #ddd
        .item
          height 100%
          cursor pointer
          color #999
          &.active
            background #f5f7fa
          &:hover
            background #f5f7fa
          .user *
            color #999
          .user
            display flex
            height 100%
            align-items center
            padding 0 40px 0 20px
            &:hover
              img
                animation rotate 2s infinite both
            img
              width 30px
              height 30px

            .name
              margin-left 5px
          .icon-item *
            color #999
            font-size 12px
          .icon-item
            display flex
            padding 0 10px
            height 100%
            flex-direction column
            justify-content center
            align-items center
            line-height 22px
            i
              font-size 20px
        .sub-menu
          position absolute
          background #fff
          top 0
          height calc(100vh - 68px)
          margin-top 68px
          width 100%
          box-shadow 0 0 15px #ddd
          &.slide-down-enter-active, &.slide-down-leave-active
            transition: all .3s;
            .sub-content
              display none
          &.slide-down-enter, &.slide-down-leave-to
            height 0
            opacity 0
          .mask
            position fixed
            left 0
            top 0
            bottom 0
            right 0
            z-index -1
    .side
      position fixed
      height 100%
      width $side-width
      bottom 0
      top 0
      z-index $side-zIndex
      background #1c2b36
      transition width .2s
      .side-header
        position relative
        height $container-margin-top
        text-align center
        &.fade-enter-active, &.fade-leave-active
          transition opacity .5s
        &.fade-enter, &.fade-leave-to
          opacity 0
        .logo1
          width 136px
          height 56px
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)
        .logo2
          width 63px
          height 46px
          position absolute
          top 50%
          left 50%
          transform translate(-50%, -50%)
          &.fade-enter-active, &.fade-leave-active
            transition opacity .5s
          &.fade-enter, &.fade-leave-to
            opacity 0
        .title
          font-size 16px
          color #fff
          font-weight 700
          text-align center
          line-height $header-height
      .side-menu
        position relative
        height calc(100% - 68px)
        box-sizing border-box
        .menu-item
          position: relative;
          font-size: 14px;
          padding: 0 13px;
          -webkit-transition: border-color .3s, background-color .3s, color .3s;
          transition: border-color .3s, background-color .3s, color .3s;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          padding-left: 20px;
          color: rgb(255, 255, 255);
          background #1c2b36
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          white-space: nowrap;
          list-style: none;
          &:hover
            background #0f1922
          i
            color #909399
            font-size 22px
            margin-right: 8px;
            text-align: center;
            vertical-align: middle;
          img
            width 22px
            height 22px
            margin-right 8px
            vertical-align: middle;
            transition-duration .3s
            &.big
              transform scale(1.2)
          .title
            color #fff
          &.active-menu
            border-left 1px solid #3bc0c3
            background #0f1922
          &.active-menu i
            color #5491de
        .sub-menu
          position absolute
          width 280px
          top 0
          bottom 0
          left $side-width
          box-shadow 0 0 8px #ddd
          min-height 100%
          background #fff
          .sub-menu-item
            height 48px
            line-height 48px
            font-size 15px
            color #666
            padding 0 16px
            cursor pointer
            &:hover
              background #f9f9f9
      .side-footer
        position absolute
        bottom 0
        background #0F1922
        width 100%
        height $side-bottom-height
        .user-wrapper
          position absolute
          right 5px
          top 50%
          transform translateY(-50%)
          white-space nowrap
          img
            width 22px
            height 22px
            cursor pointer
            border-radius 50%
            vertical-align middle
            margin-right 5px
          span
            color #fff
            cursor pointer
            font-size 12px
    .container
      padding-top 78px
      margin-left $side-width
      transition-duration .2s
      padding-left 10px
      padding-right 10px
      box-sizing border-box

  // 激活子菜单样式
  .router-link-active {
    background #f9f9f9
  }
</style>
